<template>
    <div>
      <el-card shadow="never" class="cardpad0 tree-card" :style="{height: height+'px', overflow: 'auto'}">
<!--        <span slot="header">-->
<!--          <el-select v-model="version" :placeholder="$t('fmeaDoc.versionCompare.version')" size="small" value-key="id" style="width:220px" @change="versionChange">-->
<!--            <el-option v-for="item in versionOptions" :key="item.id" :value="item" :label="item.versionStatus==='0'?'草稿':item.version" />-->
<!--          </el-select>-->
<!--        </span>-->
        <el-tree :data="data" show-checkbox :render-content="renderContent" :check-strictly="true" :default-expand-all="true" class="focustree" />
        <div v-if="!data.length" class="tree-nodata">
          <img :src="require('@/assets/images/nodata.png/')">
          <div>{{ $t('fmeaDoc.versionCompare.noData') }}</div>
        </div>
      </el-card>
    </div>
</template>

<script>
export default {
  name: 'ContrastTree',
  props: {
    data: {
      type: Array
    }
  },
  data() {
    return {
      version: '',
      height: ''
    }
  },
  mounted() {
    this.height = this.getContentHeight() - 250
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('span', [
            h('span', {
              domProps: {
                innerHTML: data.nodeName
              },
              attrs: {
                title: data.nodeName
              },
              style: {
                maxWidth: '86%',
                display: 'inline-block',
                fontSize: '14px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                verticalAlign: 'middle',
                color: (data.editType === 'del') ? '#FF3030' : (data.editType === 'add') ? '#228B22' : '#000',
                'text-decoration': data.editType === 'del' ? 'line-through' : ''
              }
            })
          ])
        ])
      ])
    }
  }
}
</script>

